import eventBus, { useSubscribe } from "../../../framework/common/eventBus";
import { useUpdate } from "ahooks";
import { message, Popconfirm } from "antd";
import { useForm } from "../../../framework/common/context/metadata-context";
import { deleteGroupRow, revalidateSubGroup } from "../../../framework/common/rule/setRuleResult";
import { useRef } from "react";

export default function OperationTable({ form, rightFixedTableRef, group, scrollBarWidth, data }) {
  const metadataManager = useForm().root;
  const updater = useUpdate();
  //table_group_title模式下模式偏移位置
  const heightRef=useRef("81px")
  useSubscribe(`group.fiexedTableUpdate.${group.code}`, () => {
    updater();
  });
  useSubscribe("operation.header.update." + group.code, (height) => {
    heightRef.current=height
    updater();
  });

  
  function hanldeDelete(rowIndex) {
    //删除子表当前行的所有数据 
    deleteGroupRow(group,data,rowIndex)
    //更新当前子表验证规则
    revalidateSubGroup(metadataManager,group.code)
    message.success("删除成功");
  }
  return (
    <div className={`absolute top-0 overflow-hidden bg-white operation-table-wrapper`} style={{ right: scrollBarWidth + "px", maxHeight: 500 - form.scrollBarWidth + "px",top:heightRef.current }}>
      <table ref={rightFixedTableRef} className="fixed-table runtime-data-list table-process-form">
        <colgroup>
          <col style={{ width: 64 - scrollBarWidth + "px" }}></col>
        </colgroup>
        <tbody>
          {data.map((row, rowIndex) => {
            let rowStyle = group.cachedHeight[rowIndex];
            return (
              <tr key={`${row.__cid__}`} style={rowStyle} className="border-b">
                <td className="text-center border-l text-primary" style={{ verticalAlign: "middle" }}>
                  <Popconfirm placement="topRight" title="确认删除此条明细记录?" onConfirm={() => hanldeDelete(rowIndex)} okText="确认" cancelText="取消">
                    <i title="删除" className="cursor-pointer iconfont icon-shanchu"></i>
                  </Popconfirm>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}
